<style scoped>
  .expand-row{
    margin-bottom: 16px;
  }
</style>
<template>
  <div class="center-ld">

    <Icon type="ios-cafe" size="36"/>角色下用户<br/>
    <Table stripe :columns="columns2" :data="data3"></Table><br/>

    <Icon type="ios-cafe-outline" size="36"/>角色下菜单<br/>
    <Table stripe :columns="columns1" :data="data2"></Table><br/>

      <Icon type="md-cafe" size="36"/>角色下API<br/>
      <Table stripe :columns="columns1" :data="data1"></Table><br/>

  </div>
</template>
<script>
export default {
  props: {
    row: Object,
    data: []
  },
  data () {
    return {
      columns1: [
        {
          title: 'parentId',
          key: 'parentId'
        },
        {
          title: 'id',
          key: 'id'
        },
        {
          title: 'name',
          key: 'name'
        },
        {
          title: 'code',
          key: 'code'
        },
        {
          title: 'method',
          key: 'method'
        },
        {
          title: 'status',
          key: 'status'
        },
        {
          title: 'type',
          key: 'type'
        },
        {
          title: 'uri',
          key: 'uri'
        }
      ],
      columns2: [
        {
          title: 'uid',
          key: 'uid'
        },
        {
          title: 'username',
          key: 'username'
        },
        {
          title: 'status',
          key: 'status'
        },
        {
          title: 'avatar',
          key: 'avatar',
          render: (h, params) => {
            return h('img', { attrs: {
              src: params.row.avatar
            } })
          }

        }],
      data1: this.row.Role2API,
      data2: this.row.Role2Menu,
      data3: this.row.Role2User

    }
  }
}
</script>
